<template>
  <div class="app-container">
    <el-tabs v-model="step" @tab-click="handleTabClick">
      <el-tab-pane label="待初审" name="first"></el-tab-pane>
      <el-tab-pane label="待二审" name="second"></el-tab-pane>
      <el-tab-pane label="返图审核" name="third"></el-tab-pane>
      <el-tab-pane label="已通过(二审)" name="fourth"></el-tab-pane>
    </el-tabs>

    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label-width="100px" label="品牌ID" prop="brandId">
        <el-input
          v-model="queryParams.brandId"
          placeholder="请输入品牌ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label-width="100px" label="型号ID" prop="modelId">
        <el-input
          v-model="queryParams.modelId"
          placeholder="请输入型号ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label-width="100px" label="设备编号" prop="dvcNo">
        <el-input
          v-model="queryParams.dvcNo"
          placeholder="请输入设备编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label-width="100px" label="发动机编号" prop="engNo">
        <el-input
          v-model="queryParams.engNo"
          placeholder="请输入发动机编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="企业名称"
        prop="ownerName"
      >
        <el-input
          v-model="queryParams.ownerName"
          placeholder="请输入企业名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="企业联系方式"
        prop="ownerContact"
      >
        <el-input
          v-model="queryParams.ownerContact"
          placeholder="请输入企业联系方式"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="环保编号"
        prop="code"
      >
        <el-input
          v-model="queryParams.code"
          placeholder="请输入环保编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="排放标准"
        prop="rule"
      >
        <el-select
          v-model="queryParams.rule"
          placeholder="请选择排放标准"
          clearable
        >
          <el-option
            v-for="dict in dict.type.emission_rule"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="设备当前所在"
        prop="driverLocation"
      >
        <el-input
          v-model="queryParams.driverLocation"
          placeholder="请输入输入设备当前所在"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="设备详细地址"
        prop="driverLocDetail"
      >
        <el-input
          v-model="queryParams.driverLocDetail"
          placeholder="请输入设备详细地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item
        v-if="moreSearch"
        label-width="100px"
        label="备案类型"
        prop="recordType"
      >
        <el-select
          v-model="queryParams.recordType"
          placeholder="请选择备案类型  1本地 2异地"
          clearable
        >
          <el-option
            v-for="dict in dict.type.dev_record_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="moreSearch && step == 'first'"
        label-width="100px"
        label="通过状态"
        prop="status"
      >
        <el-select
          v-model="queryParams.status"
          placeholder="请选择通过状态"
          clearable
        >
          <el-option
            v-for="dict in dict.type.dev_record_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-more-outline"
          size="mini"
          @click="toggleMoreSearch"
          >{{ moreSearch ? "隐藏" : "更多" }}</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['record:record:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="recordList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="环保编号" align="center" prop="code" />
      <el-table-column label="设备品牌" align="center" prop="dvcBrand" />
      <el-table-column label="设备型号" align="center" prop="dvcModel" />
      <el-table-column label="设备类别" align="center" prop="dvcTypeName" />
      <el-table-column label="所有人" align="center" prop="ownerName" />
      <el-table-column label="联系方式" align="center" prop="ownerContact" />
      <el-table-column label="操作员" align="center" prop="driverName" />
      <el-table-column
        label="操作员联系方式"
        align="center"
        prop="driverContact"
      />
      <el-table-column
        label="设备当前位置"
        align="center"
        prop="driverLocation"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="设备详细地址"
        align="center"
        prop="driverLocDetail"
      />
      <el-table-column
        label="卡颜色"
        align="center"
        prop="cardStatus"
        v-if="step != 'third'"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.hb_card_type"
            :value="scope.row.cardStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="step == 'first' || step == 'second' || step == 'third'"
            size="mini"
            type="text"
            @click="toExamine(scope.row)"
            >审核</el-button
          >
          <el-button
            v-if="step == 'fourth' || step == 'five'"
            size="mini"
            type="text"
            @click="toExamine(scope.row)"
            >查看详情</el-button
          >
          <el-button v-if="step == 'five'" size="mini" type="text"
            >注销</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 返图审核对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      center
      width="40%"
      append-to-body
    >
      <div class="container">
        <div class="table-title">基本信息</div>
        <table class="tablenew" cellpadding="0" cellspacing="0">
          <tr>
            <td class="lable_td">设备所有人</td>
            <td>{{ backImgStep.xxxx }}</td>
            <td class="lable_td">所有人电话</td>
            <td>{{ backImgStep.xxxx }}</td>
          </tr>
          <tr>
            <td class="lable_td">操作员</td>
            <td>{{ backImgStep.xxxx }}</td>
            <td class="lable_td">操作员电话</td>
            <td>{{ backImgStep.xxxx }}</td>
          </tr>
          <tr>
            <td class="lable_td">环保编号</td>
            <td>{{ backImgStep.xxxx }}</td>
            <td class="lable_td">创建时间</td>
            <td>{{ backImgStep.xxxx }}</td>
          </tr>
        </table>

        <div class="table-title" style="margin-top: 20px">图片信息</div>
        <table class="tablenew" cellpadding="0" cellspacing="0">
          <tr>
            <td class="lable_td">环保信息采集卡照片</td>
            <td>
              <div class="img_box">
                <img src="@/assets/images/profile.jpg" alt="" />
              </div>
            </td>
          </tr>
          <tr>
            <td class="lable_td">环保编号放大照片(含整车照片)</td>
            <td>
              <div class="img_box">
                <img src="@/assets/images/profile.jpg" alt="" />
              </div>
            </td>
          </tr>

          <tr>
            <td class="lable_td">环保编号</td>
            <td>{{ backImgStep.xxxx }}</td>
          </tr>
          <tr>
            <td class="lable_td">号牌材质·</td>
            <td>
              <el-select
                v-model="backImgStep.xxxx"
                placeholder="请选择"
                style="width: 267px"
              >
                <el-option
                  v-for="item in codetypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </td>
          </tr>

          <tr>
            <td class="lable_td">审核不通过原因</td>
            <td>
              <el-input v-model="backImgStep.xxxx" />
            </td>
          </tr>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pass">审核通过</el-button>
        <el-button>审核不通过</el-button>
        <el-button @click="open = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/record/record";

export default {
  name: "Record",
  dicts: [
    "base_fuel_type",
    "regist_types",
    "hb_card_type",
    "emission_rule",
    "dev_record_type",
    "use_place_type",
  ],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 备案表格数据
      recordList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        brandId: null,
        dvcType: null,
        modelId: null,
        dvcNo: null,
        engNo: null,
        ownerName: null,
        ownerContact: null,
        code: null,
        rule: null,
        driverLocation: null,
        driverLocDetail: null,
        recordType: null,
      },
      // 表单参数
      form: {},

      step: "third",
      moreSearch: true,
      backImgStep: { xxxx: 1321 },
      codetypeOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
      value: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 显示隐藏更多筛选条件
    toggleMoreSearch() {
      console.log(this.moreSearch);
      this.moreSearch = !this.moreSearch;
    },
    // 审核详情
    toExamine() {
      if (this.step == "third") {
        this.open = true;
        this.title = "返图审核";
      } else {
        this.$router.push({
          path: "/record/recordDetail",
          query: { step: this.step },
        });
      }
    },
    // 标签点击
    handleTabClick(tab, event) {
      console.log(tab.name);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    pass() {
      let params = {
        id: this.backImgStep.id,
      };
      // api.backImg(params).then((res) => {
      //   this.open = false;
      //   this.getList();
      //   this.$message.success("审核通过");
      // });
    },
    /** 查询备案列表 */
    getList() {
      this.loading = true;
      let stepVal = "";
      if (this.step == "first") {
        stepVal = 1;
      } else if (this.step == "second") {
        stepVal = 2;
      } else if (this.step == "third") {
        stepVal = 3;
      } else if (this.step == "fourth") {
        stepVal = 4;
      }
      this.queryParams.step = stepVal;
      api.listRecord(this.queryParams).then((res) => {
        res.rows.forEach((item) => {
          item.driverLocation = JSON.parse(item.driverLocation);
        });
        this.recordList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        memberId: null,
        brandId: null,
        dvcBrand: null,
        dvcType: null,
        dvcTypeName: null,
        dvcModel: null,
        modelId: null,
        dvcNo: null,
        dvcFct: null,
        dvcDt: null,
        usePlace: null,
        registType: null,
        engModel: null,
        engNo: null,
        engFct: null,
        engDt: null,
        oliVolume: null,
        engCheck: null,
        power: null,
        netpower: null,
        fuelType: null,
        ownerName: null,
        ownerIdentify: null,
        ownerContact: null,
        ownerAddress: null,
        ownerAddressDetail: null,
        adminName: null,
        adminContact: null,
        driverName: null,
        driverCert: null,
        driverContact: null,
        certOrg: null,
        files: null,
        status: null,
        step: null,
        code: null,
        rule: null,
        qrcode: null,
        updateTime: null,
        createTime: null,
        driverIdentify: null,
        driverRegion: null,
        driverProject: null,
        driverLocation: null,
        driverLocDetail: null,
        recordType: null,
        envNo: null,
        envCode: null,
        noPassKeys: null,
        noPassReason: null,
        hasOrder: null,
        isInstalled: null,
        isChecked: null,
        carCode: null,
        toCity: null,
        dvcLevelOne: null,
        dvcLevelTwo: null,
        dvcLevelThree: null,
        checkTime: null,
        dvcAttrs: null,
        tonnage: null,
        remarks: null,
        checkStep: null,
        driverCityid: null,
        ownerCityid: null,
        means: null,
        placeImg: null,
        appVersion: null,
        sysVersion: null,
        appType: null,
        sysName: null,
        isUpload: null,
        lat: null,
        lng: null,
        uploadNum: null,
        tCode: null,
        carInfoId: null,
        isOnline: null,
        errMsg: null,
        hasCard: null,
        postCard: null,
        cardStatus: null,
        isPunish: null,
        ossFiles: null,
        isOssUpload: null,
        checkSmscode: null,
        autoDel: null,
        autoChange: null,
        groupNames: null,
        autoCardUpload: null,
        isProvinceUpload: null,
        isProvinceReupload: null,
        pin: null,
        secCheckTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除备案编号为"' + ids + '"的数据项？')
        .then(function () {
          return api.delRecord(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "record/record/export",
        {
          ...this.queryParams,
        },
        `record_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  padding: 0 20px;
  .table-title {
    font-weight: 600;
    font-size: 20px !important;
    margin-bottom: 18px;
  }
  .lable_td {
    width: 150px;
    font-weight: 600;
    font-size: 15px !important;
  }

  .img_box {
    display: flex;
    padding: 10px;
    img {
      margin-right: 10px;
    }
    ::v-deep .el-form-item {
      margin-bottom: 12px;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 0;
}

.tablenew {
  width: 100%;
  border-radius: 6px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #dbdbdb;
}
.tablenew tr td {
  border: 1px solid #dbdbdb;
  border-bottom: 0;
  border-right: 0;
  height: 30px;
  font-size: 14px;
  padding: 4px 16px;
  color: #4d5051;
}
.tablenew tr td:nth-child(even) {
  color: #202426 !important;
}
.tablenew tr td:last-child {
  border-right: 1px solid #dbdbdb;
}
.tablenew tr:last-child td {
  border-bottom: 1px solid #dbdbdb;
}

.tablenew tr:first-child td {
  border-top: 0;
}
.tablenew tr:last-child td {
  border-bottom: 0;
}
.tablenew tr td:first-child {
  border-left: 0;
}
.tablenew tr td:last-child {
  border-right: 0;
}
</style>
